<script setup lang="ts">
import AnimationDialog from '@/components/Dialog/AnimationDialog.vue'
import { useDialogStore } from '@/stores/dialog'

import { ref, onMounted, onUnmounted } from 'vue'
import NewWord from '@/views/World3D/World.vue'
import ChinaMap from '@/views/Maps/ChinaMap.vue'
import HeaderCom from '@/components/Layout/PageHeader/HeaderCom.vue'
import TopCom from './layout/TopCom.vue'
import AllLeft from '@/components/PermissionsModule/HumanAllLeft.vue'
import AllRight from '@/components/PermissionsModule/HumanAllRight.vue'
import Footer from './layout/FooterCom.vue'
import { roleStore } from '@/stores/role'
import { mapStore } from '@/stores/worldMap'
import { storeToRefs } from 'pinia'

//全球各区雇员人数对比
import GlobalEmployeeNumByRegionComparison from '@/components/PermissionsModule/Human/GlobalEmployeeNumByRegionComparison.vue'
//全球人员结构-年龄分布
import GlobalPersonnelStructureReportAge from '@/components/PermissionsModule/Human/GlobalPersonnelStructureReportAge.vue'
//全球人员结构-司龄分布
import GlobalPersonnelStructureReportEmployment from '@/components/PermissionsModule/Human/GlobalPersonnelStructureReportEmployment.vue'
//全球人员结构-学历分布
import GlobalPersonnelStructureReportAcademic from '@/components/PermissionsModule/Human/GlobalPersonnelStructureReportAcademic.vue'
//全球人员结构-职级分布
import GlobalPersonnelStructureReportRank from '@/components/PermissionsModule/Human/GlobalPersonnelStructureReportRank.vue'
//全球人员结构-人数分布
import GlobalPersonnelStructureReportPeople from '@/components/PermissionsModule/Human/GlobalPersonnelStructureReportPeople.vue'
// 全球人员结构-性别分布
import GlobalPersonnelStructureReportGender from '@/components/PermissionsModule/Human/GlobalPersonnelStructureReportGender.vue'
//全球各区雇员人数趋势
import GlobalEmployeeNumberTrendsByRegion from '@/components/PermissionsModule/Human/GlobalEmployeeNumberTrendsByRegion.vue'
// 全球各区域人工成本总额趋势
import GlobalLaborCosts from '@/components/PermissionsModule/Human/GlobalLaborCosts.vue'
// 全国各区人工成本比对
import GlobalLaborCostsContrast from '@/components/PermissionsModule/Human/GlobalLaborCostsContrast.vue'
// 人员流动率
import EmployeeTurnoverRate from '@/components/PermissionsModule/Human/EmployeeTurnoverRate.vue'
// 全球入职分析
import GlobalEntryAnalysis from '@/components/PermissionsModule/Human/GlobalEntryAnalysis.vue'
// 全球离职分析
import GlobalDepartureAnalysis from '@/components/PermissionsModule/Human/GlobalDepartureAnalysis.vue'
// 全球入职人数比对
import GlobalEnterComparison from '@/components/PermissionsModule/Human/GlobalEnterComparison.vue'
// 全球离职职人数比对
import DepartureComparison from '@/components/PermissionsModule/Human/DepartureComparison.vue'
// 全球各区绩效结果
import Performance from '@/components/PermissionsModule/Human/Performance.vue'
//全球绩效分布
import GlobalPerformanceDistributionFile from '@/components/PermissionsModule/Human/GlobalPerformanceDistributionFile.vue'
// 查询人效趋势（年）（区域）
import HumanEffect from '@/components/PermissionsModule/Human/HumanEffect.vue'
// 查询元效趋势（年）（区域）
import Metaeffect from '@/components/PermissionsModule/Human/Metaeffect.vue'
// 查询人效各国对比（年月）（区域）
import ComparisonHumanEffect from '@/components/PermissionsModule/Human/ComparisonHumanEffect.vue'
// 查询元效各国对比（年月）（区域）
import ComparisonMetaeffect from '@/components/PermissionsModule/Human/ComparisonMetaeffect.vue'

//信息技术部绩效
import ITPerformanceReport from '@/components/PermissionsModule/Human/ITPerformanceReport.vue'
//入职
import InformationTechnologyDepartmentStaffCount from '@/components/PermissionsModule/Human/InformationTechnologyDepartmentStaffCount.vue'
//离职
import InfoTechDeptResignationNums from '@/components/PermissionsModule/Human/InfoTechDeptResignationNums.vue'

// 各国人工成本比对
import GlobalLaborCostsContras from '@/components/PermissionsModule/Human/GlobalLaborCostsContras.vue'

//成本占比
import CostProportionReport from '@/components/PermissionsModule/Human/CostProportionReport.vue'
// 人工成本总额趋势
import GlobalEmployeeLcPYear from '@/components/PermissionsModule/Human/GlobalEmployeeLcPYear.vue'
//全球各区分类指标得分
import OperationalEfficiencyScore from '@/components/PermissionsModule/Human/OperationalEfficiencyScore.vue'
//全球各区运营类指标
import OperationalEfficiencyMetrics from '@/components/PermissionsModule/Human/OperationalEfficiencyMetrics.vue'
//全球各区经营类指标
import GlobalBusinessMetricsByRegion from '@/components/PermissionsModule/Human/GlobalBusinessMetricsByRegion.vue'
//全球直销利润同比增长情况
import GlobalDirectSalesProfitYoYGrowth from '@/components/PermissionsModule/Human/GlobalDirectSalesProfitYoYGrowth.vue'
//全球直销营收同比增长情况
import GlobalDirectSalesRevenueYoYGrowth from '@/components/PermissionsModule/Human/GlobalDirectSalesRevenueYoYGrowth.vue'
//欧亚区回款趋势
import RepaymentRateTrend from '@/components/PermissionsModule/Human/RepaymentRateTrend.vue'
const { restChina } = storeToRefs(mapStore())

const rolesStore = roleStore()
const { humanLevel } = rolesStore

const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore
dialogInfo.visible = false

const worldMapStore = mapStore()
const toggleMap = ref(false) // 切换地图
toggleMap.value = worldMapStore.isChina
// 监听state
worldMapStore.$subscribe((mutation, state) => {
  toggleMap.value = state.isChina
})

onMounted(() => {
  // 调取总的接口
  if (humanLevel != 0) {
    getAll()
  }
})

onUnmounted(() => {
  clearInterval(timer)
})

/**
 * @description: 1 国家 2 区域 3 全球
 */
const newRole = ref(0)
newRole.value = humanLevel // 初始化面板权限
// 监听state
rolesStore.$subscribe((mutation, state) => {
  newRole.value = state.humanLevel
})

let timer = null // 定时器
const getAll = () => {}

const dialogCB = ref(null)
dialogStore.$subscribe((mutation, state) => {
  dialogCB.value.changeDialogVisible(dialogInfo.visible)
})

const dialogInfoCB = {
  title: '', // 标题
  style: 'cb', // 动画风格 左上：lt 左中：lm 左下：lb 右上：rt 右中：rm 右下：rb
  width: '60%', // 自定义宽度
}
</script>

<template>
  <Layout :boxClassName="'human-box'">
    <template v-slot:header>
      <HeaderCom class-name="human-header" />
    </template>
    <template v-slot:top><TopCom /></template>
    <template v-slot:left><AllLeft /></template>
    <template v-slot:main>
      <NewWord v-if="!toggleMap" />
      <ChinaMap v-if="toggleMap && !restChina" />
    </template>
    <template v-slot:right><AllRight /></template>
    <template v-slot:footer> <Footer /> </template>
  </Layout>
  <AnimationDialog
    ref="dialogCB"
    :dialogInfo="dialogInfoCB"
    @close="dialogInfo.visible = false"
  >
    <div v-if="dialogInfo.visible">
      <GlobalEmployeeNumByRegionComparison
        v-if="dialogInfo.componentName == 'GlobalEmployeeNumByRegionComparison'"
      />
      <GlobalEnterComparison
        v-if="dialogInfo.componentName == 'GlobalEnterComparison'"
      />
      <ComparisonHumanEffect
        v-if="dialogInfo.componentName == 'ComparisonHumanEffect'"
      />
      <GlobalPersonnelStructureReportAge
        v-if="dialogInfo.componentName == 'GlobalPersonnelStructureReportAge'"
      />
      <GlobalPersonnelStructureReportEmployment
        v-if="
          dialogInfo.componentName == 'GlobalPersonnelStructureReportEmployment'
        "
      />
      <GlobalPersonnelStructureReportAcademic
        v-if="
          dialogInfo.componentName == 'GlobalPersonnelStructureReportAcademic'
        "
      />
      <GlobalPersonnelStructureReportRank
        v-if="dialogInfo.componentName == 'GlobalPersonnelStructureReportRank'"
      />
      <GlobalPersonnelStructureReportPeople
        v-if="
          dialogInfo.componentName == 'GlobalPersonnelStructureReportPeople'
        "
      />
      <GlobalPersonnelStructureReportGender
        v-if="
          dialogInfo.componentName == 'GlobalPersonnelStructureReportGender'
        "
      />
      <GlobalEmployeeNumberTrendsByRegion
        v-if="dialogInfo.componentName == 'GlobalEmployeeNumberTrendsByRegion'"
      />
      <GlobalLaborCosts v-if="dialogInfo.componentName == 'getLaborCosts'" />
      <GlobalLaborCostsContras v-if="dialogInfo.componentName == 'Contrast'" />
      <EmployeeTurnoverRate
        v-if="dialogInfo.componentName == 'getEmployeeTurnoverRate'"
      />
      <GlobalEntryAnalysis
        v-if="dialogInfo.componentName == 'getEntryAnalysis'"
      />
      <GlobalDepartureAnalysis
        v-if="dialogInfo.componentName == 'getDepartureAnalysis'"
      />
      <DepartureComparison
        v-if="dialogInfo.componentName == 'DepartureComparison'"
      />
      <Performance
        v-if="dialogInfo.componentName == 'KeyExpenditureComparison'"
      />
      <GlobalPerformanceDistributionFile
        v-if="dialogInfo.componentName == 'GlobalPerformanceDistributionFile'"
      />
      <HumanEffect v-if="dialogInfo.componentName == 'getHumanEffect'" />
      <ComparisonMetaeffect
        v-if="dialogInfo.componentName == 'ComparisonMetaeffect'"
      />
      <Metaeffect v-if="dialogInfo.componentName == 'getMetaeffect'" />
      <ITPerformanceReport
        v-if="dialogInfo.componentName == 'ITPerformanceReport'"
      />
      <InformationTechnologyDepartmentStaffCount
        v-if="
          dialogInfo.componentName ==
          'InformationTechnologyDepartmentStaffCount'
        "
      />
      <InfoTechDeptResignationNums
        v-if="dialogInfo.componentName == 'InfoTechDeptResignationNums'"
      />
      <GlobalLaborCostsContras
        v-if="dialogInfo.componentName == 'GlobalLaborCostsContras'"
      />
      <CostProportionReport
        v-if="dialogInfo.componentName == 'CostProportionReport'"
      />
      <GlobalEmployeeLcPYear
        v-if="dialogInfo.componentName == 'getEmployeeLcPYear'"
      />
      <GlobalLaborCostsContrast
        v-if="dialogInfo.componentName == 'getComparisonLaborCosts'"
      />
      <GlobalPerformanceDistributionFile
        v-if="dialogInfo.componentName == 'getGlobalPerformanceMonth'"
      />
      <OperationalEfficiencyScore
        v-if="dialogInfo.componentName == 'OperationalEfficiencyScore'"
      />
      <OperationalEfficiencyMetrics
        v-if="dialogInfo.componentName == 'OperationalEfficiencyMetrics'"
      />
      <GlobalBusinessMetricsByRegion
        v-if="dialogInfo.componentName == 'GlobalBusinessMetricsByRegion'"
      />
      <GlobalDirectSalesProfitYoYGrowth
        v-if="dialogInfo.componentName == 'GlobalDirectSalesProfitYoYGrowth'"
      />
      <GlobalDirectSalesRevenueYoYGrowth
        v-if="dialogInfo.componentName == 'GlobalDirectSalesRevenueYoYGrowth'"
      />
     <RepaymentRateTrend
        v-if="dialogInfo.componentName == 'RepaymentRateTrend'"
      />
    </div>
  </AnimationDialog>
</template>

<style lang="scss" scoped></style>
